<h2 mat-dialog-title>Create a preset with or without target</h2>
<mat-dialog-content class="mat-body-1">

  <div fxLayout="column" fxLayoutAlign="start start">

    <mat-form-field fxFill>
      <input [disabled]="true" matInput placeholder="Progress Mode"
             value="{{(this.dialogData.mode === ProgressMode.ROLLING) ? 'Rolling' : 'Year to date'}}">
    </mat-form-field>

    <ng-container *ngIf="this.dialogData.mode === ProgressMode.ROLLING">
      <mat-form-field fxFill>
        <input [disabled]="true" matInput placeholder="Rolling Period"
               value="{{dialogData.rollingPeriod}}">
      </mat-form-field>

      <mat-form-field fxFill>
        <input [disabled]="true" matInput placeholder="Period Multiplier"
               value="{{dialogData.periodMultiplier}}">
      </mat-form-field>
    </ng-container>

    <mat-form-field fxFill>
      <input [disabled]="true" matInput placeholder="Progress Type"
             value="{{dialogData.yearProgressTypeModel.label}}">
    </mat-form-field>

    <mat-form-field fxFill>
      <input [disabled]="true" matInput placeholder="Activity Types"
             value="{{progressPresetModel.activityTypes.join(', ')}}">
    </mat-form-field>

    <mat-form-field fxFill>
      <input [disabled]="true" matInput placeholder="Commute Rides"
             value="{{(progressPresetModel.includeCommuteRide) ? 'Enabled' : 'Disabled'}}">
    </mat-form-field>

    <mat-form-field fxFill>
      <input [disabled]="true" matInput placeholder="Indoor"
             value="{{(progressPresetModel.includeIndoorRide) ? 'Enabled' : 'Disabled'}}">
    </mat-form-field>

    <mat-form-field fxFill>
      <input (change)="onTargetValueChanged()"
             [(ngModel)]="progressPresetModel.targetValue"
             [placeholder]="(this.dialogData.mode === ProgressMode.YEAR_TO_DATE) ? 'Enter target value to reach by the end of the year' + ((dialogData.yearProgressTypeModel.unit) ? ' in ' + dialogData.yearProgressTypeModel.unit : '') + ' or leave empty' :
				   'Enter the target value to be maintained on ' + (((dialogData.periodMultiplier === 1) ? 'last rolling ' + dialogData.rollingPeriod.toLocaleLowerCase().slice(0, -1) : (dialogData.periodMultiplier + ' last rolling ' + dialogData.rollingPeriod.toLocaleLowerCase()))) + ((dialogData.yearProgressTypeModel.unit) ? ' in ' + dialogData.yearProgressTypeModel.unit : '') + ' or leave empty'"
             matInput
             min="1"
             type="number">
    </mat-form-field>
  </div>
</mat-dialog-content>
<mat-dialog-actions>
  <button color="primary" mat-dialog-close mat-stroked-button>
    Cancel
  </button>
  <span fxFlex="1"></span>
  <button (click)="onSave()" color="primary" mat-stroked-button>
    <span>Create preset</span>
  </button>
</mat-dialog-actions>
